import Avatar from "@/components/Avatar"
import BasicItem from "./BasicItem"
import PhoneAndAddress from "./PhoneAndAddress"
import Tag from "./Tag"
import dynamic from 'next/dynamic'

const WordCloud = dynamic(() => (import('./WordCloud')), { ssr: false })

export default function BasicInfo ({
    name,
    englishAlias,
    gender,
    age,
    place,
    idNumber,
    avatarUrl,
    phoneList,
    address,
    tagList,
    wordCloudList,
}) {
    return (
        <div className="w-full h-full flex flex-col gap-6">
            <div className="flex justify-between h-full items-center">
                <div className="text-sm flex flex-col gap-1 mt-1 mr-1">
                    <div>
                        <span className="text-lg">{name ?? '--'}</span>
                    </div>
                    {/* <div>
                        <span>({ englishAlias ?? '--' })</span>
                    </div> */}
                    <div>
                        <span>{gender ?? '--'}，</span>
                        <span>{age ?? '--'}岁，</span>
                        <span>{place ?? '--'}</span>
                    </div>
                    <div>
                        <span>
                            {idNumber ?? '--'}
                        </span>
                    </div>
                </div>
                <Avatar size={108} avatarUrl={avatarUrl}/>
            </div>
            <BasicItem title="手机号和地址">
                <PhoneAndAddress
                    phoneList={phoneList}
                    address={address}
                />
            </BasicItem>
            <BasicItem title="标签">
                <Tag 
                    list={tagList}
                />
            </BasicItem>
            <BasicItem title="纠纷热词">
                <WordCloud list={wordCloudList}/>
            </BasicItem>
        </div>
    )
}